<template>
<div class="panel">
    <div class="panel-header">
        <div class="bl"></div>
        <div class="title">客人信息</div>
    </div>
    <div class="panel-body">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" label-width="100px">

            <el-form-item label="贵宾" prop="name" required>
                <el-input v-model="ruleForm.name" placeholder="请填写贵宾姓名"></el-input>
            </el-form-item>

            <el-form-item label="贵宾身份证号" prop="id_card" required>
                <el-input v-model="ruleForm.id_card" placeholder="请填写贵宾身份证号"></el-input>
            </el-form-item>

            <el-form-item label="贵宾联系电话" prop="phone" required>
                <el-input v-model="ruleForm.phone" placeholder="请填写联贵宾联系电话"></el-input>
            </el-form-item>

            <el-form-item label="贵宾预产期日期" prop="event_date" required>
                <el-date-picker v-model="ruleForm.event_date" type="date" value-format="yyyy-MM-dd" placeholder="请填写贵宾预产期日期"></el-date-picker>
            </el-form-item>

            <el-form-item label="贵宾生产医院" prop="hospital" required>
                <el-input v-model="ruleForm.hospital" placeholder="请填写贵宾生产医院"></el-input>
            </el-form-item>

            <el-form-item label="贵宾家庭地址" prop="address" required>
                <el-input v-model="ruleForm.address" placeholder="请填写贵宾家庭地址"></el-input>
            </el-form-item>

            <el-form-item label="紧急联系人" prop="urgent_name" required>
                <el-input v-model="ruleForm.urgent_name" placeholder="请填写联系人"></el-input>
            </el-form-item>

            <el-form-item label="紧急联系人电话" prop="urgent_phone" required>
                <el-input v-model="ruleForm.urgent_phone" placeholder="请填写紧急联系人电话"></el-input>
            </el-form-item>

            <el-form-item label="紧急联系人关系" prop="urgent_relation" required>
                <el-input v-model="ruleForm.urgent_relation" placeholder="请填写紧急联系人关系"></el-input>
            </el-form-item>

        </el-form>
    </div>
</div>
</template>

<script>
const ruleForm = {
    name: '',
    id_card: '',
    phone: '',
    event_date: '',
    hospital: '',
    address: '',
    urgent_name: '',
    urgent_phone: '',
    urgent_relation: ''
};

export default {
    data() {
        return {
            ruleForm: Object.assign({}, ruleForm),
            rules: {
                name: [
                    { required: true, message: '请填写贵宾姓名' }
                ],
                id_card: [
                    { required: true, message: '请输入身份证号' },
                    { pattern: /^[1-9]\d{16}(\d|X|x)$/, message: '请输入正确的身份证号'}
                ],
                phone: [
                    { required: true, message: '请输入联系电话'},
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的联系电话' }
                ],
                event_date: [
                    { required: true, message: '请输入贵宾月产期日期'}
                ],
                hospital: [
                    { required: true, message: '请输入贵宾生产医院'}
                ],
                address: [
                    { required: true, message: '请输入贵宾家庭地址'}
                ],
                urgent_name: [
                    { required: true, message: '请输入紧急联系人姓名'}
                ],
                urgent_phone: [
                    { required: true, message: '请输入紧急联系人电话'},
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的联系电话'}
                ],
                urgent_relation: [
                    { required: true, message: '请输入紧急联系人关系'}
                ]
            }
        }
    },
    methods: {
        async submit() {
            await this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    return valid;
                } else {
                    throw "触发错误";
                }
            })
        }
    }
}
</script>

<style>

</style>
